<template>
  <div class="">
    <public-table radio :height="500" :table-option="tableOption" :table-data="tableData" :page="pageParam"
      @page-change="onPageChange" @handleSelectionChange="selectItem">
      <el-form :inline="true">
        <el-form-item label="项目名称">
          <el-input v-model="searchParam.keyword" placeholder="请输入项目名称" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="行业类型">
          <el-select v-model="searchParam.industryTypeId" placeholder="请选择行业类型" clearable>
            <el-option v-for="item in typeOptions" :label="item.enumName" :value="item.enumId" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目类别">
          <el-select v-model="searchParam.projectNature" placeholder="请选择项目类别" clearable>
            <el-option v-for="item in projectOptions" :label="item.typeName" :value="item.projectTypeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="searchParam.year" type="year" placeholder="请选择年度" style="height: 100%;"
            value-format="YYYY" />
        </el-form-item>
        <el-form-item>
          <el-button class="button_view" @click="searchHandler">查询</el-button>
          <el-button color="#f0f0f0" style="color: #000000" @click="resetHandler">重置</el-button>
        </el-form-item>
      </el-form>
      <template #topContent>
        <el-row style="align-items: center;margin-bottom: 5px;">
          <el-col :span="4">
            <span style="color: var(--el-color-primary);">单位：万元</span>
          </el-col>
          <el-col :span="20" style="text-align: right;">
            <el-button class="button_edit" @click="addHandler">添加</el-button>
            <el-button class="button_edit" @click="deleteHandler">删除</el-button>
            <el-button class="button_edit" @click="exportHandler">一键导出</el-button>
          </el-col>
        </el-row>
      </template>
      <template #operate="{ row }">
        <el-button size="small" class="button_edit" @click="editHandler(row)">编辑</el-button>
      </template>
    </public-table>
    <industrialDialog ref="industrialDialogRef" @submitSuccess="getList" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import publicTable from "@/components/PublicTable.vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElDatePicker, ElSelect, ElOption, ElNotification, ElRow, ElCol } from "element-plus";
import { investSummaryApi, otherApi } from "@/api/investment.js";
import { exportFile } from "@/common/utils/GlobalUtils.js";
import industrialDialog from "./industrialDialog.vue";

// 搜索参数
let searchParam = reactive({
  keyword: "",
  industryTypeId: "",
  projectNature: "",
  year: ""
});
let typeOptions = ref([]);
let projectOptions = ref([
  {
    typeName: "新设立",
    projectTypeId: 3
  },
  {
    typeName: "续投",
    projectTypeId: 4
  }
]);

// 分页参数
let pageParam = reactive({
  total: 0,
  current: 1,
  size: 20
});

let tableOption = ref([
  {
    prop: "companyName",
    label: "实施主体",
    minWidth: 100
  },
  {
    prop: "projectSummaryName",
    label: "项目名称",
    minWidth: 100
  },
  {
    prop: "projectName",
    label: "关联项目名称",
    minWidth: 130
  },
  {
    prop: "projectNature",
    label: "项目类别",
    minWidth: 100,
    formatter: (val) => {
      return { 3: "新设立", 4: "续投" }[val]
    },
  },
  {
    prop: "industryTypeName",
    label: "行业类型",
    minWidth: 100
  },
  {
    prop: "investAmount",
    label: "拟计划总投额(投资规模)",
    minWidth: 180,
    formatter: (val) => {
      return val / 10000
    },
  },
  {
    prop: "year",
    label: "年度",
    minWidth: 100
  },
  {
    prop: "yearAmount",
    label: "年度计划投资额",
    minWidth: 130,
    formatter: (val) => {
      return val / 10000
    },
  },
  {
    prop: "executeAmount",
    label: "已执行金额",
    minWidth: 100,
    formatter: (val) => {
      return val / 10000
    },
  },
  {
    prop: "completeRate",
    label: "完成率",
    minWidth: 100,
    formatter: (val) => {
      return val * 100 + "%";
    },
  },
  {
    prop: "estimateProfit",
    label: "投资预估收益（年均利润）",
    minWidth: 200,
    formatter: (val) => {
      return val / 10000
    },
  },
  {
    prop: "periods",
    label: "实施年限",
    minWidth: 100
  },
  {
    prop: "projectContent",
    label: "项目基本情况",
    minWidth: 130
  },
  {
    prop: "operate",
    label: "操作",
    width: 100,
    slot: true,
    slotName: "operate",
    fixed: "right",
    overHidden: false
  },
]);
let tableData = ref([]);

// 分页
let onPageChange = (e) => {
  pageParam.current = e.page;
  pageParam.size = e.limit;
  getList();
};

// 选择
let selectItem = (arr) => {
  deleteList.value = arr[0] || "";
};

// 搜索
let searchHandler = () => {
  getList();
};
// 重置
let resetHandler = () => {
  for (let key in searchParam) {
    searchParam[key] = "";
  }
  getList();
};

// 获取行业类型
let getType = async () => {
  let res = await otherApi.getListEnum({ type: 2 });
  typeOptions.value = res.data || [];
};

// 获取列表
let getList = async () => {
  let res = await investSummaryApi.getSummaryPage({
    pageNum: pageParam.current,
    pageSize: pageParam.size,
    param: {
      year: searchParam.year,
      industryTypeId: searchParam.industryTypeId,
      projectNature: searchParam.projectNature,
      keyword: searchParam.keyword,
      type: 1,// 1-产业投资类 2-开发建设类
    }
  });
  if (res.data) {
    tableData.value = res.data.content;
    pageParam.total = res.data.totalSize;
  }
};

onMounted(() => {
  getType();
  getList();
});

let industrialDialogRef = ref(null);

// 新增
let addHandler = () => {
  industrialDialogRef.value.openHandler({
    title: "添加",
    type: 1
  });
};

// 删除
let deleteList = ref("");
let deleteHandler = async () => {
  if (!deleteList.value) {
    ElNotification.warning("请选择需要删除的数据")
    return
  }
  let res = await investSummaryApi.deleteList({ summaryIds: [deleteList.value.summaryId] });
  if (res.code === "200") {
    ElNotification.success(`删除成功！`);
    getList();
  }
};

// 一键导出
let exportHandler = async () => {
  let res = await investSummaryApi.exportFIle({
    type: 1,
    keyword: searchParam.keyword,
    industryTypeId: searchParam.industryTypeId,
    year: searchParam.year,
  });
  if (res) {
    exportFile(res, "投资计划汇总表-产业投资类");
  }
};

// 编辑
let editHandler = (row) => {
  industrialDialogRef.value.openHandler({
    title: "编辑",
    type: 1,
    row
  });
}
</script>

<style lang="scss" scoped>
:deep(.el-date-editor) {
  .el-input__wrapper {
    height: 100%;
  }
}
</style>
